<template>
  <div class="content">
    <div class="left">
    </div>
    <div class="right">
      <div class="rightTop">
        <div v-if="status">
          <div class="infoBox">
            <span class="font">姓&ensp;名：</span>
            <span class="font1">{{name}}</span>
          </div>
          <div class="infoBox">
            <span class="font">学&ensp;校：</span>
            <span class="font1">{{school}}</span>
          </div>
          <div class="infoBox">
            <span class="font">手&ensp;机：</span>
            <span class="font1">{{phone}}</span>
          </div>
          <div class="infoBox">
            <span class="font">邮&ensp;箱：</span>
            <span class="font1">{{mail}}</span>
          </div>
          <div class="infoBox">
            <span class="font">性&ensp;别：</span>
              <div v-if="sex == '1'" class="sexSty"><span class="font1">男</span></div>
              <div  v-else-if="sex == '2'" class="sexSty"><span class="font1">女</span></div>
          </div>
        </div>
        <div v-else>
          <div class="infoBox2">
            <span class="font">姓&ensp;名：</span>
            <el-input v-model="name"></el-input>
          </div>
          <div class="infoBox2">
            <span class="font">学&ensp;校：</span>
            <el-input v-model="school"></el-input>
          </div>
          <div class="infoBox2">
            <span class="font">手&ensp;机：</span>
            <el-input v-model="phone"></el-input>
          </div>
          <div class="infoBox2">
            <span class="font">邮&ensp;箱：</span>
            <el-input v-model="mail"></el-input>
          </div>
          <div class="infoBox2">
            <span class="font">性&ensp;别：</span>
            &ensp;&ensp;&ensp;
            <el-radio v-model="radio1" label="1">男</el-radio>
            <el-radio v-model="radio1" label="2">女</el-radio>
              <!-- <div v-if="sex == '1'" class="sexSty"><span class="font1">男</span></div>
              <div  v-else-if="sex == '2'" class="sexSty"><span class="font1">女</span></div> -->
          </div>
        </div>
      </div>
      <div class="rightBottom">
        <div class="buttonBox">
          <el-button type="primary" @click="toEditInfo">编辑</el-button>
        </div>
        <div class="buttonBox">
          <el-button type="primary" @click="toSaveInfo">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '../../util/http';

export default {
  name: 'refresh',
	inject: ['reload'],
  data() {
    return {
      radio1: window.localStorage.getItem('userSex'),
      status: true,
      name: window.localStorage.getItem('userName'),
      school: window.localStorage.getItem('userSchool'),
      phone: window.localStorage.getItem('userTel'),
      mail: window.localStorage.getItem('userMail'),
      sex: window.localStorage.getItem('userSex'),
    };
  },
  methods: {
    toEditInfo() {
      this.status = !this.status;
    },
    toSaveInfo() {
      if (this.name === '' || this.school === '' || this.phone === '' || this.mail === '') {
        this.$message.error('信息不能为空');
      } else {
        http.put(`/studentAPI/updateStudentMessage?id=${window.localStorage.getItem('userId')}
          &name=${this.name}&sex=${this.radio1}&school=${this.school}&tel=${this.phone}
          &mail=${this.mail}`)
        .then((res) => {
          const resData = res.data.resultMap.updateStudentMessage;
          window.localStorage.setItem('userName', resData.name);
          window.localStorage.setItem('userSex', resData.sex);
          window.localStorage.setItem('userMail', resData.mail);
          window.localStorage.setItem('userTel', resData.tel);
          window.localStorage.setItem('userSchool', resData.school);
          this.$message({
            message: '修改个人信息成功！',
            type: 'success',
          });
          this.refresh();
        })
        .catch((error) => {
            console.log(error);
          });
        // this.refresh();
      }
    },
    refresh() {
      this.reload();
    },
  },
};
</script>

<style scoped>
.content{
  width: 23rem;
  height: 11rem;
  border: .03rem solid #ccc;
  border-left:none;
  border-right:none;
  border-bottom:none;
}
.left{
  float: left;
  width: 7rem;
  height: 10rem;
  /* background-color: red; */
}
.right{
  float: left;
  width: 16rem;
  height: 10rem;
  /* background-color: yellow; */
}
.rightTop{
  /* background-color: red; */
  height: 6.5rem;
  margin: 1.5rem 0 1rem 1rem;
}
.infoBox{
  margin: .5rem 0 .7rem 0;
}
.infoBox2{
  margin: 0 0 .5rem 0;
}
.font{
  color: #66cccc;
  font-size: .5rem;
}
.font1{
  color: #FAACA8;
  font-size: .5rem;
}
.sexSty{
  display: inline;
}
.rightBottom{
  width: 16rem;
  height: 4.5rem;
  /* background-color: aqua; */
}
.buttonBox{
  float: left;
  margin: 0 1.5rem 0 1rem;
}
.el-button {
  background-color: #66cccc;
  width: 2rem;
	color: white;
  border:#66cccc;
}
.el-button:hover {
  background-color: #FAACA8;
}
.el-input {
  width: 5rem;
  height: 10%;
}
</style>
